<template>
	<div class="user-content">
		<div class="page-title">会员</div>
		<div v-if="!userListShow" class="user-search">
			<div class="user-text1">您想要查找哪位会员?</div>
			<div class="user-text2">可对 会员详情、照片、充值等进行操作...</div>
			<div>
					<el-input placeholder="请输入内容" v-model="keyword">
						<template slot="append">
							<el-button type="primary" plain @click="onSearch">主要按钮</el-button>
						</template>
					</el-input>
			</div>
			<div class="user-btn-wapper">
				<div class="user-btn">
					<img src="@/assets/icon/Def_Icon_OrderCard_AddVip.png" alt="">
					<p>新增会员</p>
				</div>
			</div>
		</div>
		<List v-on="$listeners" @getUser="getUser" v-else></List>
		
		<Detail ref="detail"></Detail>

	</div>
</template>

<script>
import List from "./list"
import Detail from "./detail"

export default {
	name: 'cashier',
	components: { List,  Detail},
	data() {
		return {
			userListShow: false,
			keyword: "",
		};
	},
	created() {
	},
	computed: {
	},
	mounted() {
	},
	methods: {
		getUser(user) {
			this.$refs['detail'].show();
		},
		onSearch() {
			this.userListShow = true;
		},
	},
};
</script>

<style scoped lang="scss">

.user-content {
	height: 100%;
    background: #f8f8f8 url(https://static.bokao2o.com/wisdomDesk/images/Def_MemberIndex_BcImg.png) top/100% no-repeat;
    overflow: hidden;
}
.page-title {
	line-height: 40px;
    height: 40px;
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #28282d;
    margin-right: 32px;
	background: transparent; padding: 35px 20px 10px 20px; z-index: 10;
}
.user-search {
	width: 400px;
	padding: 122px 0 140px 0;
    margin: 0 auto;
    -webkit-transition: -webkit-transform .7s,background .7s,font-size .7s;
}
.user-text2{
	margin-top: 5px;
    line-height: 20px;
    color: #5a5a5a;
    font-size: 15px;
    margin-bottom: 30px;
}
.user-text1{
    font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #28282d;
    line-height: 40px;
}
.user-btn {
	width: 88px;
    text-align: center;
    padding: 10px 0;
    background: #fff;
    cursor: pointer;
}
.user-btn-wapper {
	margin-top: 20px;
}
.dialogClass {
	z-index: 2050 !important;
	.el-dialog__body {
		height: 100% !important;
		overflow: hidden;
	}
}
</style>
